<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author PR
-->
<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ getTitle.value }} </span>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsReportMesScReportList',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { mesScReportListData } from '/@/api/mes/mesScReport';
  import { FormProps } from '/@/components/Form';

  const { t } = useI18n('report.mesScReport');
  const { showMessage } = useMessage();
  const getTitle = {
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || t('设备采集点查询管理'),
  };
  const ceqtypecode = ref('');

  const searchForm: FormProps = {
    baseColProps: { lg: 7, md: 12},
    labelWidth: 90,
    autoAdvancedLine: 4,
    schemas: [
      {
        label: t('EQ类型'),
        field: 'ceqtypecode',
        component: 'Select',
        componentProps: {
          dictType: 'mes_eq_type',
          allowClear: true,
          onSelect: (e) => {
            ceqtypecode.value = e;
            console.log(ceqtypecode.value, 'ceqtypecode.value');
          },
        },
      },
      {
        label: t('EQ名称'),
        field: 'ceqcode',
        // component: 'Input',
        fieldLabel: 'ceqname',
        component: 'ListSelect',
        componentProps: (e) => {
          console.log(e.formModel?.ceqtypecode, 'ceqtypecode');
          return {
            selectType: 'findCeqSelect',
            // 把EQ类型的值传递给后端
            params: { ceqtypecode: e.formModel?.ceqtypecode, ceqcode: '', ceqname: '' },
          }
        },
      },
      {
        label: t('数据采集点'),
        field: 'cparaname',
        // fieldLabel: 'ceqcode',
        component: 'ListSelect',
        componentProps: (e) => {
          return {
            selectType: 'findCparaSelect',
            // 把EQ类型的值传递给后端
            params: { ceqtypecode: e.formModel?.ceqtypecode, ceqcode: e.formModel?.ceqcode , ceqname: '' },
          }
        },
      },
      {
        label: t('修改时间'),
        field: 'udpatetime',
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
        },
      },
    ],
    fieldMapToTime: [['udpatetime', ['udpatetime_gte', 'udpatetime_lte']]],
  };

  const tableColumns: BasicColumn[] = [
    {
      title: t('EQ类型'),
      dataIndex: 'ceqtypecode',
      key: 'a.ceqtypecode',
      sorter: true,
      width: 130,
      align: 'left',
      dictType: 'mes_eq_type',
    },
    {
      title: t('EQ编号'),
      dataIndex: 'ceqcode',
      key: 'a.ceqcode',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('EQ名称'),
      dataIndex: 'ceqname',
      key: 'a.ceqname',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('修改时间'),
      dataIndex: 'udpatetime',
      key: 'a.udpatetime',
      sorter: true,
      width: 160,
      align: 'center',
    },
    {
      title: t('数据采集点'),
      dataIndex: 'tagname',
      key: 'a.tagname',
      sorter: true,
      width: 180,
      align: 'left',
    },
    {
      title: t('值'),
      dataIndex: 'val',
      key: 'a.val',
      sorter: true,
      width: 230,
      align: 'left',
    },
  ];

  const [registerTable, {}] = useTable({
    api: mesScReportListData,
    beforeFetch: (params) => {
      if(!params.ceqtypecode || !params.ceqname || !params.cparaname || !params.udpatetime_gte || !params.udpatetime_lte) {
        return false;
      } else {
        return params;
      }
    },
    columns: tableColumns,
    formConfig: searchForm,
    showTableSetting: true,
    useSearchForm: true,
    handleSearchInfoFn: (data: any) => {
      if(!data.ceqtypecode || !data.ceqname || !data.cparaname || !data.udpatetime_gte || !data.udpatetime_lte) {
        console.log(data, 'data');
        showMessage('请选择EQ类型、EQ名称、数据采集点、修改时间起和修改时间止后查询！');
        return false;
      } else {
        return true;
      }
    },
    canResize: true,
  });
</script>
